<template>
  <div>
    <div class="headerContainer">
      <div class="headerTool">
      <!-- PDF文件名称 -->
      <div style="margin: 0 20px 0 0">
        <span>文件名********</span>
      </div>
      <!-- 粗细 -->
      <div class="brushSize" style="margin: 0 20px 0 10px">
        <span>线条宽度：</span>
        <el-input-number v-model="brushSizeVal" style="width:100px;" @change="brushSizeChange" size="small" :min="1" :max="50" label="粗细"></el-input-number>
      </div>
      <!-- 字体大小 -->
      <div class="fontSize" style="margin: 0 20px 0 10px">
        <div>
          字体：
        </div>
        <el-select v-model="fontSizeVal" style="width:70px;" @change="changeFontSize" size="small" placeholder="字体">
          <el-option
            v-for="item in fontSizeArray"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="btn colorSelect">
        <!-- 颜色选择 -->
        <span>颜色：</span>
        <el-color-picker v-model="color1" @change="changeColor"></el-color-picker>
      </div>
      <div class="btn">
        <!-- 选择工具 -->
        <el-button @click="enableSelector($event)" size="small" circle>
          <i class="fa fa-hand-paper-o" title="Free Hand"></i>
        </el-button>
      </div>
      <div class="btn">
        <!-- 画笔 -->
        <el-button type="primary" class="tool-button" @click="enablePencil($event)" size="small" circle>
          <i class="fa fa-pencil" title="Pencil"></i>
        </el-button>
      </div>
      <div class="btn">
        <!-- 文字 -->
        <el-button type="primary" class="tool-button"  @click="enableAddText($event)" size="small" circle>
          <i class="fa fa-font" title="Add Text"></i>
        </el-button>
      </div>
      <div class="btn">
        <!-- 箭头指向 -->
        <el-button type="success" class="tool-button"  @click="enableAddArrow($event)" size="small" circle>
          <i class="fa fa-long-arrow-right" title="Add Arrow"></i>
        </el-button>
      </div>
      <div class="btn">
        <!-- 矩形 -->
        <el-button type="info" class="tool-button" @click="enableRectangle($event)" size="small" circle>
          <i class="fa fa-square-o" title="Add rectangle"></i>
        </el-button>
      </div>
      <div class="btn">
        <!-- 图片插入 -->
        <el-button type="warning" class="tool-button" @click="addImage($event)" size="small" circle>
          <i class="fa fa-picture-o" title="Add an Image"></i>
        </el-button>
      </div>
      <div class="btn">
        <!-- 单个删除 -->
        <el-button type="danger"  size="small" icon="el-icon-delete" @click="deleteSelectedObject($event)" circle></el-button>
      </div>
      <div class="btn">
        <!-- 全部清除 -->
        <el-button type="danger" size="small" icon="el-icon-refresh-right" @click="clearPage" round>重置</el-button>
      </div>
      <div class="btn">
        <!-- 展示PDF数据 -->
        <el-button type="warning" size="small" @click="showPdfData" round>JSON数据 { }</el-button>
      </div>
    </div>
    <div class="savepdf">
      <!-- 保存PDF -->
      <el-button type="primary" size="small" @click="savePDF" round><i class="fa fa-save"></i> 保存</el-button>
    </div>
    </div>
    <!-- PDF文件内容 -->
    <div id="pdf-container"></div>
    <!-- PDF数据展示模态框 -->
    <div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="dataModalLabel">数据展示</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <pre class="prettyprint lang-json linenums">
            </pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../../public/static/js/arrow.fabric'
import '../../public/static/js/pdfannotate'
import '../../public/static/js/script'
export default {
  name: 'HelloWorld',
  data(){
    return {
      pdf:null,
      color1: '#212121',
      value:true,
      fontSizeArray: [{
        value: '10',
        label: '10'
      }, 
      {
        value: '12',
        label: '12'
      }, 
      {
        value: '16',
        label: '16'
      }, 
      {
        value: '18',
        label: '18'
      }, 
      {
        value: '20',
        label: '20'
      },
      {
        value: '22',
        label: '22'
      }, 
      {
        value: '24',
        label: '24'
      }, 
      {
        value: '26',
        label: '26'
      }, 
      {
        value: '30',
        label: '30'
      }, 
      {
        value: '32',
        label: '32'
      }, 
      {
        value: '34',
        label: '34'
      },
      {
        value: '36',
        label: '36'
      }, 
      {
        value: '40',
        label: '40'
      }, 
      {
        value: '46',
        label: '46'
      }, 
      {
        value: '50',
        label: '50'
      }, 
      {
        value: '56',
        label: '56'
      }],
      fontSizeVal: '16',
      brushSizeVal:'1'
    }
  },
  mounted(){
    this.pdf = new PDFAnnotate("pdf-container", "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf", {
      onPageUpdated(page, oldData, newData) {
        // console.log(page, oldData, newData);
      },
      ready() {
      },
      scale: 1.5,
      pageImageCompression: "MEDIUM",
    });
  },
  methods: {
    //选择工具
    changeActiveTool(event) {

    },
    //ele-颜色选择器
    changeColor(color){
      this.pdf.setColor(color);
    },
    //字体大小
    changeFontSize(size){
      this.pdf.setFontSize(size);
    },
    //粗细
    brushSizeChange(currentValue, oldValue){
      this.pdf.setBrushSize(currentValue);
    },
    //选择
    enableSelector(event) {
      event.preventDefault();
      this.changeActiveTool(event);
      this.pdf.enableSelector();
    },
    //画笔
    enablePencil(event) {
      event.preventDefault();
      this.changeActiveTool(event);
      this.pdf.enablePencil();
    },
    //文字
    enableAddText(event) {
      event.preventDefault();
      this.changeActiveTool(event);
      this.pdf.enableAddText();
    },
    // 箭头
    enableAddArrow(event){
      event.preventDefault();
      this.changeActiveTool(event);
      this.pdf.enableAddArrow();
    },
    // 矩形
    enableRectangle(event) {
      event.preventDefault();
      this.changeActiveTool(event);
      this.pdf.setColor('rgba(64,158,255, 0.3)');
      this.pdf.setBorderColor('blue');
      this.pdf.enableRectangle();
    },
    //图片
    addImage(event) {
      event.preventDefault();
      this.pdf.addImageToCanvas()
    },
    // 
    enableRectangle(event) {
      event.preventDefault();
      this.changeActiveTool(event);
      this.pdf.setColor('rgba(64,158,255, 0.3)');
      this.pdf.setBorderColor('blue');
      this.pdf.enableRectangle();
    },
    // 删除所选择的元素
    deleteSelectedObject(event) {
      event.preventDefault();
      this.pdf.deleteSelectedObject();
    },
    // 保存为PDF
    savePDF() {
      // pdf.savePdf();
      this.pdf.savePdf('sample.pdf');
    },
    // 清楚页面所有注释
    clearPage() {
      this.pdf.clearActivePage();
    },
    // 展示PDF数据
    showPdfData() {
      var string = this.pdf.serializePdf();
      $('#dataModal .modal-body pre').first().text(string);
      PR.prettyPrint();
      $('#dataModal').modal('show');
    }


  }
}
</script>

<style scoped lang="less">
    /deep/ .el-color-picker__trigger{
      border:none;
    }

    .headerContainer{
      width: 100vw;
      background-color: rgba(64, 158, 255,0.6);
      height: 7vh;
      display:flex;
      align-items: center;
      justify-content:space-around;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99999;
    }

    .colorSelect{
      display:flex;
      align-items:center;
    }

    .headerTool{
      display: flex;
      align-items: center;
      .brushSize{
        display: flex;
        align-items: center;
      }
      .fontSize{
        display: flex;
        align-items: center;
      }
    }
</style>
